<template>
    <div class="login">
        <div class="top">
            <svg width="130" height="26">
                <image xlink:href="/static/common/img/logo_black.svg" src="/static/common/img/logo_black.png" width="130" height="26" />
            </svg>
        </div>
        <div class="bg">
            <svg>
                <image xlink:href="/static/common/img/loginpage_bg.svg" src="/static/common/img/loginpage_bg.png" />
            </svg>
        </div>
        <div class="count">
            <div class="img">
                <svg class="">
                    <image xlink:href="/static/common/img/index_ai.svg" src="/static/common/img/index_ai.png" />
                </svg>
                <p>新高改整体解决方案</p>
            </div>
            
            <div class="form">
                <p>账号密码登陆</p>
                <el-input placeholder="请输入内容" v-model="userName">
                    <i slot="prefix">
                        <svg width="11" height="14">
                            <image xlink:href="/static/common/img/userid_icon.svg" src="/static/common/img/userid_icon.png" width="11" height="14" />
                        </svg>
                    </i>
                </el-input>
                <el-input placeholder="请输入内容" v-model="password" type="password">
                    <i slot="prefix">
                        <svg width="11" height="14">
                            <image xlink:href="/static/common/img/password_icon.svg" src="/static/common/img/password_icon.png" width="11" height="14" />
                        </svg>
                    </i>
                </el-input>
                <el-checkbox class="remember" v-model="remember">记住密码</el-checkbox>
                <div class="btn" @click="login">登陆</div>
            </div>
        </div>
    </div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'
    export default {
        data() {
            return {
                form: {},
                userName: '',
                password: '',
                remember: false,
            }
        },
        methods: {
            login() {
                var vm = this;
                this.$http({
                    method: 'POST',
                    url: utils.UrlConfig.login,
                    data: {
                        "phone": vm.userName,
                        "username": vm.userName,
                        "password": vm.$md5(vm.password),
                    }
                }).then(function(res) {
                    if (res.data.code != 200) {
                        this.$message.error(res.data.message);
                        return;
                    }
                    $cookieStore.setAll("home_", res.data.data);
                    setTimeout(function(){
                        vm.$router.push({path: '/userManagement'})
                    }, 0)
                })
            },
        }
    }
</script>

<style scoped>
.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.bg svg, .bg image {
    width: 100%;
    height: 100%;
}

.top {
    height: 70px;
    padding: 22px 0 0 45px;
    box-sizing: border-box;
    border-bottom: 1px solid #eaeaea;
}

.count {
    width: 1068px;
    /* margin: 0 auto; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.img {
    width: 499px;
    height: 377px;
    display: inline-block;
}

.img svg, .img image {
    width: 100%;
    height: 100%;
}

.img p {
    margin-top: 30px;
    font-size: 26px;
    text-align: center;
	color: #333333;
}

.form {
    position: absolute;
    top: 0;
    right: 0;
    width: 368px;
	height: 279px;
    margin-top: 76px;
}

.form p {
    font-size: 18px;
    color: #333;
    margin-bottom: 40px;
}

.el-input {
    width: 100%;
    height: 40px;
    display: inline-block;
    margin-bottom: 24px !important;
}

.remember {
    margin-bottom: 24px;
}

.btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-sizing: border-box;
}
</style>
<style>
.el-input__prefix {
    line-height: 42px !important;
    margin-left: 5px !important;
}
</style>

